{% extends "base.html" %}

{% block title %}
<title class="title">{{title}}</title>
{% endblock %}

{% block content %}
<div class="content-section container">
  <h1>See all logs</h1>
  <h2>Most recent log</h2>
  <div class="container jumbotron">
    <h5>Time answered: {{recent_answer.date_answer}}</h5>
    <p>How are you feeling right now?: {{recent_answer.question1}}</p>
    <p>What were you doing at the moment the survey was sent?: {{recent_answer.question2}}</p>
    <p>Are you feeling sad right now?: {{recent_answer.question3}}</p>
    <p>Do you feel worse than yesterday?: {{recent_answer.question4}}</p>
  </div>
  <h2>Past log</h2>
  <p style="font-size: 12px">Click log number to see your answer</p>
  {% for record in past_answer %}
  {% if record.id != past_answer|length %}
  <h3 onclick="showElement()" class="pointer">Log #{{record.log_number}}</h3>
  <div class="show jumbotron" id="log{{record.log_number}}">
    <p>How are you feeling right now?: {{record.question1}}</p>
    <p>What were you doing at the moment the survey was sent?: {{record.question2}}</p>
    <p>Are you feeling sad right now?: {{record.question3}}</p>
    <p>Do you feel worse than yesterday?: {{record.question4}}</p>
  </div>

  <script>
      function showElement() {
          let x = document.getElementById("log{{record.log_number}}");
          if (x.style.display === "none") {
              x.style.display = "block";
          } else {
              x.style.display = "none"
          }
      }
  </script>
  {% endif %}
  {% endfor %}
</div>

{% endblock %}